<template>
  <div class="">
    <div class="enrollContent">
      <h4 class="text-center" v-if="isSignPage" >请先绑定手机号完成报名</h4>
      <!--<h4 class="text-center" v-else >请先注册</h4>-->
      <div class="info">
        <input class="text-gray" placeholder="请输入姓名"  type="text" v-model="name" name="name" @focus="tipHide()">
      </div>
      <div  class="info">
        <input class="text-gray" placeholder="请输入推广码(选填)" type="text" v-model="fissionKey" name="fissionKey" @focus="tipHide()">
      </div>
      <div  class="info">
        <input class="text-gray" placeholder="请输入手机号" type="number" v-model="phone" name="phone" @focus="tipHide()">
      </div>
      <div  class="info">
        <input class="text-gray code" placeholder="请输入验证码" type="number" v-model="code" name="code" @focus="tipHide()">
        <span class="getCode fr text-blue" :disabled="disabled" @click="sendcode">{{btntxt}}</span>
      </div>
      <div class="errorTip text-red text-sm">{{errorTip}}</div>
      <button class="button" v-if="!isSignPage" @click="enrollButton()">立即注册</button>
      <button class="button" v-else @click="signUpJob()">立即报名</button>
    </div>
  </div>
</template>

<script>

  import {bindUserInfo,getVcode,positonSignUp} from'@/controller'
  export default {
    name: 'binding',
    data: function () {
      return {
        msg: 'binding',
        showError:false,
        disabled:false,
        time:0,
        btntxt:"获取验证码",
        errorTip:"",
        phone:'',
        name:this.name,
        code:this.code,
        fissionKey:'',
        isSignPage:false,
        jobId:-1
      }
    },
    mounted: function () {
      this.jobId = this.$route.params.jobId;
      this.pageType = this.$route.params.type;
      if(this.pageType === '1'){
        this.isSignPage = true;
      }else{
        let hasBinding = localStorage.getItem('hasBind1');
        if(hasBinding=='true'){
          //跳转
          this.$router.push({
            path: `/`,
          })
        }
      }
    },
    methods:{
      tipHide(){
        this.errorTip="";
      },
      //验证手机号码部分
      sendcode(){
          if(this.phone==''||this.phone==undefined){
           this.errorTip="请输入手机号码";
         }else if(this.phone.length!=11){
           this.errorTip="手机格式不正确";
         }else{
          this.time=60;
          this.disabled=true;
          this.timer();
          getVcode({
                phone:this.phone
              }).then((data)=>{
                //
                if(data.code != 0){
                  this.errorTip="验证码发送失败";
                }
              })
            }
          },
          timer() {
            if (this.time > 0) {
             this.time--;
             this.btntxt=this.time+"s后重新获取";
             setTimeout(this.timer, 1000);
           } else{
             this.time=0;
             this.btntxt="获取验证码";
             this.disabled=false;
           }
         },
         signUpJob(){
          this.enrollButton(true).then(()=>{
          //报名
          positonSignUp(this.jobId).then((data)=>{
            if (data.code === 0&&data.data.userPhone!=null) {
              this.$router.push({
                path: `/successfulRegistration`,
              });
            }else{
              this.$toast.top('报名失败');
            }
          });
        });
        },
        enrollButton(isSignJob){
          return new Promise((resolve, reject) => {
            if(this.name==''||this.name==undefined){
              this.errorTip="请输入姓名";
              return;
            }else if(this.phone==''||this.phone==undefined){
              this.errorTip="请输入手机号码";
              return;
            }else if(this.code==''||this.code==undefined){
              this.errorTip="请输入验证码";
              return;
            }else{
            //提交绑定
            bindUserInfo({
              name:this.name,
              phone:this.phone,
              vcode:this.code,
              fissionKey:this.fissionKey
            }).then((data)=>{
              //
              if(data.code == 0){
                ///
                if(isSignJob){
                  resolve()
                }else{
                  localStorage.setItem('hasBind1',true);
                  this.$router.push({
                    path: `/bindingSuccess/`,
                  });
                }
              }
            }).catch((error)=>{
              reject()
            })
          }
        })
        }
      }
    }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .enrollContent .errorTip {
    height: 24px;
    color: #f00;
    text-align: left;
    border-bottom: none;
    padding: 2% 5%;
  }
  button{
    width: 90%;
    margin: 0 auto;
  }
  .enrollContent h4{
    color: #666;
    margin: 10px 0;
  }
  .text-blue{
    color: #1fa1f5;
  }
</style>
